<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习 - 我的博客</title>
    <link rel="stylesheet" href="assets/css/colors.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/layout.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/pages/study.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html" class="logo">我的博客</a>
            <div class="nav-container">
                <ul class="nav-links">
                    <li class="nav-dropdown">
                        <a href="index.html">首页</a>
                        <div class="dropdown-content">
                            <a href="start.html">起始页</a>
                            <a href="column.html">专栏</a>
                        </div>
                    </li>
                    <li class="nav-dropdown">
                        <a href="record.html">记录</a>
                        <div class="dropdown-content">
                            <a href="record.html">生活倒影</a>
                            <a href="study.html" class="active">学习</a>
                        </div>
                    </li>
                    <li class="nav-dropdown">
                        <a href="album.html">相册</a>
                        <div class="dropdown-content">
                            <a href="album_2024.html">2024</a>
                            <a href="album_2023.html">2023</a>
                            <a href="album_2022.html">2022</a>
                            <a href="album_2021.html">2021</a>
                        </div>
                    </li>
                    <li><a href="message.html">留言</a></li>
                </ul>
                <div class="nav-auth">
                    <a href="auth.html" class="login-btn">登录</a>
                    <div class="auth-divider"></div>
                    <a href="admin.html" class="admin-btn">管理</a>
                </div>
            </div>
        </nav>
    </header>

    <!-- 添加图片 -->
    <div class="header-image">
        <img src="assets/images/start.png" alt="Header Image" style="width: 100%; height: auto;">
    </div>

    <main class="study-container" style="padding-top: 20px;">
        <section class="study-header">
            <h1>学习记录</h1>
            <p class="subtitle">记录学习中的点点滴滴</p>
            <input type="text" id="search" placeholder="搜索学习主题..." class="search-input">
            <select id="sort" class="sort-select">
                <option value="date">按日期排序</option>
                <option value="title">按主题排序</option>
            </select>
        </section>

        <!-- 新增学习主题选择 -->
        <section class="select-study-topic">
            <h2>选择学习主题</h2>
            <select id="topic-select" class="topic-select">
                <option value="">请选择主题</option>
                <option value="算法">算法</option>
                <option value="数据结构">数据结构</option>
                <option value="Java">Java</option>
                <option value="Python">Python</option>
            </select>
            <button id="view-topic-btn" class="view-topic-btn">查看主题</button>
        </section>

        <div class="tag-filter">
            <span class="tag" data-tag="排序">排序</span>
            <span class="tag" data-tag="算法">算法</span>
            <span class="tag" data-tag="Java">Java</span>
            <span class="tag" data-tag="新特性">新特性</span>
            <button id="clear-filter" class="clear-filter-btn">清除过滤</button>
        </div>

        <section class="study-content">
            <!-- 学习项目将动态加载 -->
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于博主</h4>
                <p>一个热爱分享的博主，专注于技术与生活。</p>
            </div>
            <div class="footer-section">
                <h4>联系方式</h4>
                <p>Email: example@email.com</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 我的博客. 保留所有权。</p>
        </div>
    </footer>

    <script src="assets/js/nav.js"></script>
    <script src="assets/js/study.js"></script>
</body>
</html> 